
<div class="eject_con">
  <div id="warning"></div>
  <form action="{:url('circle/cut/pic_cut')}" id="form_cut" method="post">
    <input type="hidden" id="x" name="x" value="<?php echo I('get.x');?>" />
    <input type="hidden" id="x1" name="x1" />
    <input type="hidden" id="y1" name="y1" />
    <input type="hidden" id="x2" name="x2" />
    <input type="hidden" id="y2" name="y2" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="hidden" id="url" name="url" value="<?php echo I('get.url');?>" />
    <input type="hidden" id="filename" name="filename" value="<?php echo I('get.filename');?>" />
    <div class="pic-cut-<?php echo I('get.x');?>">
      <div class="work-title">工作区域</div>
      <div class="work-layer">
        <p><img id="nccropbox" src="<?php echo I('get.url');?>"/></p>
      </div>
      <div class="thumb-title">裁切预览</div>
      <div class="thumb-layer">
        <p><img id="preview" src="<?php echo I('get.url');?>"/></p>
      </div>
      <div class="cut-help">
        <h4>操作帮助</h4>
        <p>请在工作区域放大缩小及移动选取框，选择要裁剪的范围，裁切宽高比例固定；裁切后的效果为右侧预览图所显示；保存提交后生效。</p>
      </div>
      <div class="bottom">
        <a class="submit-btn" nctype="submit-btn" href="Javascript: void(0)">确认提交</a>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript">
function showPreview(coords)
{
	if (parseInt(coords.w) > 0){
		var rx = <?php echo I('get.x');?> / coords.w;
		var ry = <?php echo I('get.y');?> / coords.h;
		$('#preview').css({
			width: Math.round(rx * <?php echo $width;?>) + 'px',
			height: Math.round(ry * <?php echo $height;?>) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});
	}
	$('#x1').val(coords.x);
	$('#y1').val(coords.y);
	$('#x2').val(coords.x2);
	$('#y2').val(coords.y2);
	$('#w').val(coords.w);
	$('#h').val(coords.h);
}
$(function(){
	$('.dialog_head').css('margin-top','0px');
	$('.page').css('padding-top','0px');
	$('.dialog_close_button').remove();
    $('#nccropbox').Jcrop({
		aspectRatio:1,
		setSelect: [ 0, 0, <?php echo I('get.x');?>, <?php echo I('get.y');?> ],
		minSize:[50, 50],
		allowSelect:0,
		onChange: showPreview,
		onSelect: showPreview
    });

    $('a[nctype="submit-btn"]').click(function(){
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}
		var d=$('#form_cut').serialize();
		$.post("{:url('circle/cut/pic_cut')}",d,function(data){
			call_back(data);
			DialogManager.close('cutpic');
		});
	});
});
</script>